<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="库存页面" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <div style="font-size: 18px">
        <el-button type="primary" style="margin-left: -5%;font-size: 18px" @click="toggleSelection()">删除勾选项</el-button>
        <el-select v-model="value" placeholder="请选择类型" @change="handleSelect" style="font-size: 18px;margin-left: 5%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="font-size: 18px">
          </el-option>
        </el-select>按类型查找
        <el-input
          @keyup.enter.native="searchClick"
          placeholder="通过书名或作者搜索..."
          prefix-icon="el-icon-search"
          size="small"
          style="width: 400px;margin-top: -7%;font-size: 18px;margin-left: 5%"
          v-model="keywords">
        </el-input>
        <el-button size="small" type="primary" icon="el-icon-search" style="font-size: 18px" @click="searchClick">搜索</el-button>
      </div>
      <router-link to="/addBook" style="width:20px;margin-left: 80%;">
        <el-link icon="el-icon-edit" style="font-size: 18px">添加图书</el-link>
      </router-link>
      <div class="table" style="width: 100%;height: 100%;">
        <el-table
          ref="multipleTable"
          style="background: hsla(0, 0%, 80%, .25) border-box;height: 588px;font-size: 18px"
          :data="books.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          stripe
          height="600"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection">
          </el-table-column>
          <el-table-column
            v-for="info in rightHeader" :key="info.key"
            :property="info.key"
            :label="info.label"
          >
            <template slot-scope="scope">
              {{scope.row[scope.column.property]}}
            </template>
          </el-table-column>
          <el-table-column label="书籍详情">
            <template slot-scope="scope">
              <el-button type="primary" @click="editB(scope.row['bookId'])" style="font-size: 18px">编辑</el-button>
              <el-button @click="delB(scope.row['bookId'])" style="font-size: 18px">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row style="margin-top: 1%;margin-left: -1%">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="books.length"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        books: [
          {
            bookId: '',
            typeId: '',
            img: '',
            bookName: '',
            author: '',
            publisher: '',
            price: '',
            summary: '',
            bnumber: ''
          },
        ],
        options: [{
          value: '1',
          label: '历史'
        }, {
          value: '2',
          label: '小说'
        }, {
          value: '3',
          label: '地理'
        }, {
          value: '4',
          label: '传记'
        }, {
          value: '5',
          label: '哲学'
        }, {
          value: '6',
          label: '社会学'
        }, {
          value: '7',
          label: '艺术'
        }, {
          value: '8',
          label: '政治'
        }, {
          value: '9',
          label: '建筑'
        }, {
          value: '10',
          label: '戏剧'
        }, {
          value: '11',
          label: '音乐'
        }, {
          value: '12',
          label: '军事'
        }, {
          value: '13',
          label: '数学'
        }, {
          value: '14',
          label: '美术'
        }, {
          value: '15',
          label: '设计'
        }, {
          value: '16',
          label: '佛教'
        }
        ],
        value: '',
        rightHeader: [
          {
            label: '书名',
            key: 'bookName'
          },
          {
            label: '编号',
            key: 'bookId'
          },
          {
            label: '数量',
            key: 'bnumber'
          }
        ],
        currentPage: 1,
        pageSize: 7,
        keywords: '',
        multipleSelection: [],
      };
    },
    created() {
      this.load();
    },
    methods: {
      load(){
        this.$axios.get('/library/books')
          .then(resp => {
            if (resp.data.code == 200) {
              this.books = resp.data.data;
            }
          })
      },
      goBack() {
        this.$router.go(-1);
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      editB(e){
        this.$router.push({path:'/editBook',query:{bookId:e}});
      },
      delB(e){
        this.$confirm('是否确认删除？', '提示', {
        }).then(() => {
        this.$axios.post('/library/delB/'+e)
        .then(resp=>{
          if(resp.data.code==200){
            this.$alert("删除成功!", '提示', {
              confirmButtonText: '确定'
            });
            this.load();
          }
        })
        }).catch(() => { this.$message({
          message: '取消删除',
          type: 'failed'
        })});
      },
      searchClick(){
        let _this=this;
        _this.$axios.post('/library/selectBN/'+_this.keywords)
          .then(resp => {
            if (resp.data.code == 200) {
              _this.books = resp.data.data;
            }
          })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      toggleSelection(rows) {
        this.$confirm('是否确认删除？', '提示', {
        }).then(() => {
          let len=this.multipleSelection.length,i;
          for(i=0;i<len;i++){
            this.$axios.post('/library/delB/' +this.multipleSelection[i].bookId);
          }
          this.$alert("删除成功!", '提示', {
            confirmButtonText: '确定',
            callback:action=>{
              this.load();
            }
          });
        }).catch(() => { this.$message({
          message: '取消删除',
          type: 'failed'
        })});
      },
      handleSelect(value){
        this.$axios.post('/library/selectBT/'+value)
          .then(resp => {
            if (resp.data.code == 200) {
              this.books = resp.data.data;
            }
          })
      }
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    width: 1150px;
    margin-top: 2%;
    margin-left: 20%;
    padding: 1em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .table /deep/ .el-table th {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

  .table /deep/ .el-table tr {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }
  .table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

</style>
